<template>
  <div id="app" class="login_container">
    <div class="login_box">
      <!--头像区域-->
      <div class="avatar_box">
        <img class="logo" src="../assets/logo.jpg" alt />
      </div>
      <div class="ProjectName">
            <label>慢性病报销系统</label>
      </div>
      <!--登录表单区域-->
      <el-form label-width="0" class="login_form" :model="form" ref="logindata">
        <!--用户名-->
        <el-form-item >
          <el-input v-model="form.userid" prefix-icon="el-icon-s-custom" placeholder="请输入账号"></el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item >
          <el-input type="password" v-model="form.pwd" prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
        </el-form-item>
        <!--按钮区域-->
        <el-form-item class="btns">
          <el-button type="primary" @click="login('logindata')">登录</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'// 引入axios插件
export default {
  methods: {
    login (logindata) {
      const _this = this
      this.$refs[logindata].validate((valid) => {
        axios.post('http://localhost:8088/login/' + this.form.userid + '/' + this.form.pwd).then(function (resp) {
          if (resp.data === '登录成功') {
            _this.$router.push({
              path: '/index'
            })
          } else {
            _this.$message({
              showClose: true,
              message: resp.data,
              type: 'error'
            })
          }
        })
      })
    }
  },
  data () {
    return {
      form: {
        id: '',
        userid: '',
        pwd: ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login_container {
  background-image: url("../assets/background.jpg");
  background-size: 100%;
  height: 100%;
}
</style>
